<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统首页</title>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
</head>
<body>
<div style="width: 100%;height: 100%;display: flex">

    <!--左侧导航开始-->
    <nav class="navigation" role="navigation">
        <div style=" width: 200px;"><a th:href="@{/index}">
            <span class="logo">Yin</span>
        </a></div>
        <div class="sidebar">
            <ul id="sidebar-list">
                <li class="admin flex-center">
                    <div>
                        <div style="color: white">
                            admin
                        </div>
                        <div>
                            <a href="#" style="color: white">在线</a>
                            <a href="#" style="color: white">注销</a>
                        </div>
                    </div>
                </li>
                <li>
                    <a class="sidebar-item flex-center" onclick="user()"><i
                            class="fa fa-user-o fa-fw"></i><span>用户管理</span></a>
                </li>
                <li>
                    <a class="sidebar-item flex-center" onclick="role()"><i
                            class="fa fa-user-secret fa-fw"></i><span>角色管理</span></a>
                </li>
                <li>
                    <a class="sidebar-item flex-center" onclick="menu()"><i
                            class="fa fa-th-list fa-fw"></i><span>菜单管理</span></a>
                </li>
                <li>
                    <a class="sidebar-item flex-center" onclick="dept()"><i
                            class="fa fa-outdent fa-fw"></i><span>部门管理</span></a>
                </li>
            </ul>
        </div>
    </nav>
    <!--左侧导航结束-->

    <!--右侧部分开始-->
    <div class="right-view">

        <!--顶部栏开始-->
        <div class="navbar">
            <ul class="navbar-menu" id="navbar-menu">
                <li class="navbar-menu-item"><a href="#"><i class="fa fa-gear"></i><span class="navbar-font">系统管理</span></a>
                </li>
                <li class="navbar-menu-item"><a href="#"><i class="fa fa-video-camera"></i><span class="navbar-font">系统监控</span></a>
                </li>
                <li class="navbar-menu-item"><a href="#"><i class="fa fa-bars"></i><span class="navbar-font">系统工具</span></a>
                </li>
                <li class="navbar-menu-item"><a href="#"><i class="fa fa-area-chart"></i><span
                        class="navbar-font">统计报表</span></a></li>
                <li class="navbar-menu-item"><a href="#"><i class="fa fa-desktop"></i><span
                        class="navbar-font">实例演示</span></a></li>
            </ul>
        </div>
        <!--顶部栏结束-->


        <div class="content-main">
            <iframe id="yin_iframe" th:src="@{/user}" style="width: 100%;height: 100%">首页</iframe>
        </div>
    </div>
    <!--右侧部分结束-->

</div>

<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>


<script th:inline="javascript">


    //改变Iframe的地址
    changeIframe = function (url) {
        $("#yin_iframe", window.parent.document).attr('src', url);
    }

    //用户管理
    user = function () {
        changeIframe("/user")
    }

    //角色管理
    role = function () {
        changeIframe("/role")
    }

    //菜单管理
    menu = function () {
        changeIframe("/menu")
    }

    //部门管理
    dept = function () {
        changeIframe("/dept")
    }


    $(function () {

        //侧边栏点击样式变化
        $("#sidebar-list li:not(li:eq(0))").click(function () {
            $(this).siblings('li').find('a').removeClass('sidebar-item-selected');  // 删除其他兄弟元素的样式
            $(this).find('a').addClass('sidebar-item-selected');                    // 添加当前元素的样式
        });

        //顶部菜单鼠标样式变化
        $("#navbar-menu li")
            .mouseover(function () {
                $(this).addClass('navbar-item-mouse-color');
            })
            .mouseout(function () {
                $(this).removeClass('navbar-item-mouse-color');
            })
            .click(function () {
                $(this).siblings('li').removeClass('navbar-item-click-color');
                $(this).addClass('navbar-item-click-color');
            });

    });
</script>


</body>
</html>